<template>
  <div class="showDialogBox">
    <van-dialog v-model:show="showFaBuDialog" title="修改" show-cancel-button confirm-button-text="提交"
      @cancel="closeShowFaBuDialog" @confirm="editArticle()">
      <!-- <h1>请选择你的需求{{ isPublishArticlesSon }}</h1> -->
      <p class="choose">
        <van-radio-group v-model="info.articleType" direction="horizontal">
          <van-radio name="1">仅阅读</van-radio>
          <van-radio name="2">点再看</van-radio>
        </van-radio-group>
      </p>
      <p class="red">请知悉：文章仅可仅被修改一次。对于修改前的报数无法查看，修改后的报数可以查看。</p>
      <h1>文章标题</h1>
      <p><van-field v-model="info.title" placeholder="建议：标题+需求" /></p>
      <h1>文章链接</h1>
      <p><van-field v-model="info.link" placeholder="请输入文章链接" /></p>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps, } from "vue";
import { articleEditApi } from "../api/index.js";
let showFaBuDialog = ref(true)

let info = ref({

})
function closeShowFaBuDialog() {
  emit("changeIsArticlesEdit")
}
const props = defineProps({
  row: {
    type: Object,
    default: {},
  },
})
const emit = defineEmits(["changeIsArticlesEdit"])
onMounted(() => {
  info.value = props.row
  info.value.title = ""
  info.value.link = ""
  console.log(info.value);

  // 在组件挂载后执行的逻辑，例如初始化数据、订阅事件等
})
function editArticle() {
  let obj = {
    articleType: info.value.articleType,
    beReadCount: 0,
    createTime: "",
    id: info.value.id,
    link: info.value.link,
    rank: "",
    title: info.value.title,
    userId: info.value.userId
  };
  articleEditApi(obj).then((res) => {
    console.log(res);
    closeShowFaBuDialog()
  });
}
</script>

<style lang="less" scoped>
.showDialogBox {
  padding: 30px;
  box-sizing: border-box;

  h1 {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 20px;
    color: #000000;
    text-align: center;
    font-style: normal;
    text-transform: none;
    padding: 20px 0;
    box-sizing: border-box;
  }

  p {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #8D8D8D;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }

  .red {
    color: #A40000;
    padding-top: 10px;
  }

  .choose {
    padding-top: 10px;
  }
}

/deep/ .van-dialog {
  padding: 0 20px !important;
  box-sizing: border-box;
}
</style>
